<!--  -->
<template>
  <div>
    <el-dialog title="设施信息" width="50%" :visible.sync="facilityDialog" :close-on-click-modal="false">
      <el-form ref="elform" :model="model" label-width="120px" size="small" label-position="right">
        <el-row>
          <el-col :span="12">
            <el-form-item dis label="设施名称" prop="stationName" :rules="[{ required: true, message: '请输入设施名称', trigger: 'blur' }]">
              <el-input :disabled="flag" v-model="model.stationName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设施类型" prop="stationType" :rules="[{ required: true, message: '请选择设施类型', trigger: 'change' }]">
              <el-select :disabled="flag" v-model="model.stationType" filterable placeholder="请选择">
                <el-option v-for="(item, index) in facilityTypeList" :key="index" :label="item.dictValue" :value="item.dictKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择楼栋" prop="buildingKey" :rules="[{ required: true, message: '请选择分区', trigger: 'change' }]">
              <el-select :disabled="flag" v-model="model.buildingKey" filterable placeholder="请选择"  @change="getArea">
                <el-option v-for="(item, index) in buildingList" :key="index" :label="item.spaceName" :value="item.primaryKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择分区" prop="partitionKey" :rules="[{ required: true, message: '请选择分区', trigger: 'change' }]">
              <el-select :disabled="flag" v-model="model.partitionKey" filterable placeholder="请选择" @change="setFloor">
                <el-option v-for="(item, index) in areaList" :key="index" :label="item.partitionName" :value="item.primaryKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择楼层" prop="floorKey" :rules="[{ required: true, message: '请选择楼层', trigger: 'change' }]">
              <el-select :disabled="flag" v-model="model.floorKey" filterable placeholder="请选择">
                <el-option v-for="(item, index) in floorList" :key="index" :label="item.floorName" :value="item.floorKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="设施说明" prop="stationDesc" :rules="[{ required: true, message: '请输入设施说明', trigger: 'blur' }]">
              <el-input :disabled="flag" v-model="model.stationDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="!flag">
            <el-form-item label="设施照片" prop="stationName" :rules="[{ required: false, message: '请上传设施照片', trigger: '' }]">
              <UploadAlbum :height="200" :width="198" v-bind:cover-url.sync="model.fileUrl" @onUploadSuccess="handleSuccess"></UploadAlbum>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-else>
            <el-form-item label="设施照片" prop="stationName">
              <el-image style="width: 198px; height: 200px" :src="model.fileUrl">
                <div slot="error" class="image-slot" style="display: flex; justify-content: center; align-items: center; height: 200px">暂无照片<i class="el-icon-picture-outline"></i></div>
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="!flag">
        <el-button @click="facilityDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="saveFacility">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import Facility from '../../../../api/projectInfo';
  import { apiBuildingInfo } from '../../../../api/building';
  import { dictList } from '../../../../api/common';
  import { requestTips, askDialog } from '../../../../assets/util';
  import { formValid } from '@/lib/utils';

  export default {
    props: {
      workId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        model: { stationName: '', stationType: '', buildingKey: '', partitionKey: '', floorKey: '', stationDesc: '', fileUrl: '', businessAttachment: [] },
        facilityDialog: false,
        facilityTypeList: [],
        buildingList: [],
        areaList: [],
        floorList: [],
        flag: true,
        projectKey: this.$route.query.projectKey || localStorage.getItem('projectKey'),
      };
    },

    mounted() {
      this.getDictionary();
      this.getBuilding();
    },
    methods: {
      //楼栋
      async getBuilding() {
        let res = await Facility.apiAllBuildList({
          projectKey: this.$route.query.projectKey,
        });
        this.buildingList = res.rows || [];
      },
      //分区
      async getArea() {
        let res = await Facility.apiParkArea({ spaceKey: this.model.buildingKey });
        this.areaList = res.rows || [];
      },
      //楼层
      async setFloor() {
        let res = await Facility.listFloorCar({spaceKey:this.model.buildingKey,partitionKey:this.model.partitionKey})
        this.floorList = res.rows || [];
      },
      //新增
      addFacility() {
        this.facilityDialog = true;
        this.flag = false;
        for (let i in this.model) {
          this.model[i] = '';
        }
        this.model.businessAttachment = [];
        this.$nextTick(() => {
          this.$refs.elform.clearValidate();
        });
      },
      //设施详情
      async infoFacility(data, flag) {
        this.flag = flag;
        this.model = JSON.parse(JSON.stringify(data));
        if (data.businessAttachment && data.businessAttachment.length > 0) {
          this.model.fileUrl = data.businessAttachment[0].fileUrl;
        } else {
          this.model.fileUrl = '';
        }
        this.setFloor();
        this.facilityDialog = true;
      },
      //保存设施
      saveFacility() {
        formValid(this, 'elform', this.saveFn);
      },
      //上传成功
      handleSuccess(res, file, fileList) {
        console.log(res);
        console.log(file);
        this.model.businessAttachment = [
          {
            fileUrl: res.response.data.rows[0].url,
            fileTitle: res.response.data.rows[0].originalName,
          },
        ];
        this.model.fileUrl = res.response.data.rows[0].url;
      },
      async saveFn() {
        let param = {
          workId: this.workId,
          ...this.model,
        };
        param.projectKey = this.projectKey
        let res = this.model.primaryKey ? await Facility.apiFacilityEdit(param) : await Facility.apiFacilityAdd(param);
        requestTips(res, () => {
          this.facilityDialog = false;
          this.$emit('uploadData');
        });
      },
      async getDictionary() {
        let res = await dictList({ dictType: 'station_type' });
        this.facilityTypeList = res.rows || [];
      },
    },
  };
</script>
<style scoped></style>
